HTML5+CSS3+JavaScript Web開發案例教程
內容描述
本書緊密圍繞前端開發工程師在工作中會遇到的實際問題和應該掌握的解決方法與技術，全面介紹了使用HTML5、CSS3和JavaScript（ES6）進行Web前端開發的知識內容與實戰技巧。本書共14章，分三篇，遵循Web標準，強調“表現”與“內容”的分離，規範、全面、系統地介紹了網頁設計與製作的方法和技巧。書中給出了大量詳細的案例，並對案例進行了分析，便於讀者在理解的基礎上直接修改後使用。本書編者具備豐富的Web前端開發和教育培訓經驗，行文細膩，對每一個技術細節和實際工作中可能遇到的難點與錯誤都進行了詳細的說明和提示，大大降低了讀者的學習門檻。本書可以作為高等院校相關專業的網頁設計與製作、Web前端開發等課程的教材，也可供網頁設計、製作與開發人員參考使用。讀者可以在學習並掌握本書所講的知識內容之後做出精美的網頁。
目錄大綱
章名目錄【第 一篇】 基礎篇第 1章 Web前端開發基礎知識第 2章 HTML5語言基礎第3章 CSS語言基礎第4章 CSS3選擇器【第二篇】 樣式與佈局篇第5章 用CSS設置文本樣式第6章 用CSS設置圖片效果第7章 盒子模型第8章 用CSS設置常用元素樣式第9章 經典DIV+CSS網頁佈局方法【第三篇】 JavaScript開發篇第 10章 JavaScript基礎第 11章 程序控制流與函數第 12章 JavaScript中的對象第 13章 以集合方式處理數據第 14章 DOM## 詳細目錄【第 一篇】 基礎篇第 1章 Web前端開發基礎知識1.1 基礎概念 021.2 網頁與HTML語言 041.3 Web標準：結構、表現與行為 041.3.1 標準的重要性 051.3.2 “Web標準”概述 051.4 初步理解網站開發的過程 071.4.1 基本任務與角色 071.4.2 明確網站定位 081.4.3 收集信息和素材 081.4.4 策劃欄目內容 081.4.5 設計頁面方案 091.4.6 製作頁面 091.4.7 實現後台功能 091.4.8 整合與測試網站 091.4.9 頁面設計相關技術的基礎知識 10本章小結 11習題1 12第 2章 HTML5語言基礎2.1 HTML5基本知識 132.1.1 HTML文件結構 142.1.2 簡單的HTML案例 152.1.3 網頁源文件的獲取 192.2 實例：利用 VS Code 快速建立基本文檔 212.2.1 創建新的空白文檔 212.2.2 編寫基礎的HTML 212.3 文本標記 222.3.1 實現段落與段內換行（p和br） 222.3.2 設置標題（h1～h6） 252.3.3 使文字水平居中（center） 252.3.4 設置文字段落的縮進（blockquote） 262.4 HTML標記與HTML屬性 272.4.1 用align屬性控制段落的水平位置 282.4.2 用bgcolor屬性設置背景顏色 292.4.3 設置文字的特殊樣式 302.4.4 設置文字的大小和顏色（font） 312.4.5 網頁中的特殊文字符號 322.5 在網頁中使用圖片（img） 342.5.1 網頁中的圖片格式 342.5.2 一個簡單的插入了圖片的網頁 342.5.3 使用路徑 352.5.4 用alt屬性為圖片設置替換文本 382.6 再談HTML5 392.6.1 追根溯源 392.6.2 HTML5的優勢與特點 402.6.3 HTML5的新增標記 412.7 實例：創建一個簡單的網頁 42本章小結 44習題2 44第3章 CSS語言基礎3.1 入門知識 463.1.1 CSS標準 473.1.2 傳統HTML的缺點 473.1.3 CSS的引入 483.1.4 如何編寫CSS 503.2 理解CSS規則 513.3 基本CSS選擇器 523.3.1 標記選擇器 523.3.2 類別選擇器 533.3.3 ID選擇器 563.4 在HTML中使用CSS的方法 573.4.1 行內樣式 583.4.2 內嵌式 583.4.3 鏈接式 593.4.4 導入樣式 603.4.5 各種方法的優先級問題 62本章小結 65習題3 65第4章 CSS3選擇器4.1 理解復合選擇器 664.1.1 交集選擇器 674.1.2 並集選擇器 684.1.3 後代選擇器 704.2 CSS的繼承和層疊特性 724.2.1 繼承關系 734.2.2 CSS繼承的運用 744.2.3 CSS的層疊特性 774.3 關系選擇器 794.3.1 後代選擇器 804.3.2 子元素選擇器 804.3.3 相鄰兄弟選擇器 814.3.4 相鄰兄弟組選擇器 814.4 屬性選擇器 824.4.1 “屬性存在”選擇器 834.4.2 “屬性等於”選擇器 834.4.3 “屬性包含”選擇器 844.5 結構偽類選擇器 854.6 偽元素選擇器 86本章小結 88習題4 88【第二篇】 樣式與佈局篇第5章 用CSS設置文本樣式5.1 長度單位 905.1.1 相對類型 915.1.2 絕對類型 915.2 顏色定義 925.3 實例：通過文字樣式美化一個頁面 935.3.1 準備頁面 935.3.2 設置文字的字體 935.3.3 設置文字的傾斜效果 945.3.4 設置文字的加粗效果 965.3.5 英文字母大小寫轉換 965.3.6 控制文字的大小 975.3.7 文字的裝飾效果 995.4 實例：通過段落樣式美化頁面 1005.4.1 設置段落首行縮進 1005.4.2 設置字詞間距 1015.4.3 設置段落內部的文字行高 1025.4.4 設置段落之間的距離 1035.4.5 控制文本的水平位置 1045.4.6 設置文字及其背景色 1055.4.7 設置文字的特效 105本章小結 106習題5 107第6章 用CSS設置圖片效果6.1 設置圖片邊框 1086.1.1 基本屬性 1096.1.2 為不同的邊框分別設置樣式 1106.2 圖片縮放 1126.3 圖文混排 1136.3.1 文字環繞 1136.3.2 設置圖片與文字的間距 1146.4 實例：八大行星科普網頁 1156.5 設置圖片與文字的對齊方式 1186.5.1 橫向對齊 1186.5.2 縱向對齊 119本章小結 120習題6 121第7章 盒子模型7.1 “盒子”與“模型”的概念探究 1237.2 邊框（border） 1247.2.1 設置邊框樣式（border-style） 1257.2.2 屬性值的簡寫形式 1267.3 設置內邊距（padding） 1287.4 設置外邊距（margin） 1297.5 盒子之間的關系 1307.5.1 HTML與DOM 1307.5.2 標準文檔流 1337.5.3 div標記與span標記 1357.6 盒子在標準流中的定位原則 1377.6.1 行內元素之間的水平margin 1387.6.2 塊級元素之間的豎直margin 1397.6.3 嵌套盒子之間的margin 1407.6.4 margin屬性可以設置為負數 1417.7 實例：盒子模型計算思考題 1427.8 盒子模型相關的常用樣式 1457.8.1 背景 1457.8.2 圓角 1527.8.3 陰影 1547.8.4 漸變 155本章小結 158習題7 158第8章 用CSS設置常用元素樣式8.1 設置鏈接與導航菜單 1608.1.1 超鏈接標記 1608.1.2 豐富的超鏈接特效 1628.1.3 控制鼠標指針 1658.1.4 設置項目列表樣式 1668.1.5 實例：創建簡單的導航菜單 1688.2 設置表格樣式 1718.2.1 表格中的標記 1718.2.2 設置表格的邊框 1738.2.3 確定表格的寬度 1748.2.4 合並單元格 1748.2.5 其他與表格相關的標記 1778.2.6 實例：美化表格 1788.3 設置表單樣式 1828.3.1 表單的用途和原理 1828.3.2 表單輸入類型 1838.3.3 實例：美化表單 188本章小結 190習題8 190第9章 經典DIV&CSS網頁佈局方法9.1 向報紙學習排版思想 1939.2 CSS排版觀念 1959.2.1 兩列佈局 1959.2.2 三列佈局 1959.2.3 多列佈局 1969.3 元素的浮動 1979.3.1 浮動的方式 1989.3.2 使用clear屬性清除浮動的影響 2019.3.3 擴展盒子的高度 2029.4 元素的定位 2049.4.1 靜態定位（static） 2049.4.2 相對定位（relative） 2059.4.3 絕對定位（absolute） 2089.4.4 固定定位（fixed） 2109.5 z-index空間位置 2109.6 經典兩列佈局 2119.6.1 準備工作 2119.6.2 絕對定位法 2149.6.3 浮動定位法 2169.7 Grid和Flexbox佈局 218本章小結 219習題9 219【第三篇】 JavaScript開發篇第 10章 JavaScript基礎10.1 JavaScript簡介 22310.1.1 JavaScript的起源、發展與標準化 22310.1.2 JavaScript的組成 22410.2 JavaScript的基本語法 22610.3 使用VS Code編寫第 一個包含JavaScript的頁面 22710.3.1 創建基礎的HTML文檔 22710.3.2 編寫JavaScript 22810.3.3 在瀏覽器中查看與調試 22910.4 關鍵字與保留字 23010.5 變量 23110.6 數據類型 23310.6.1 數值類型 23310.6.2 字符型 23410.6.3 布爾型 23810.6.4 類型轉換 23810.6.5 數組 240本章小結 244習題10 245第 11章 程序控制流與函數11.1 順序結構：賦值語句與表達式 24711.2 分支結構：條件語句 24711.2.1 比較運算符 24811.2.2 邏輯運算符 24811.2.3 if語句 24911.2.4 switch語句 25011.3 循環語句 25211.3.1 while語句 25211.3.2 do…while語句 25211.3.3 for語句 25411.3.4 break和continue語句 25511.3.5 實例：九九乘法表 25711.3.6 for…of語句 25911.3.7 for…in語句 25911.4 函數 26011.4.1 定義函數的基本方法 26011.4.2 arguments對象 26211.4.3 實例：楊輝三角形 26411.4.4 變量的作用域 26611.4.5 函數作為函數的參數 26811.4.6 箭頭函數 26911.5 異常處理 270本章小結 273習題11 273第 12章 JavaScript中的對象12.1 理解對象的含義 27412.1.1 理解常見的“類-對象”結構 27512.1.2 理解JavaScript中的對象 27612.1.3 使用ES6的class語法創建類和對象 27712.2 時間日期：Date對象 27912.3 數學計算：Math對象 28312.4 原始類型與裝箱 28512.4.1 Boolean 28612.4.2 Number 28712.4.3 String 28812.5 BOM對象 28912.5.1 window對象 28912.5.2 location對象 29212.5.3 navigator對象 29312.5.4 screen對象 29512.5.5 history對象 295本章小結 298習題12 298第 13章 以集合方式處理數據13.1 數組 30013.1.1 數組的基本操作 30013.1.2 作為不同數據結構的數組 30213.2 對象 30613.3 集合類型 30713.3.1 Map集合 30713.3.2 Set集合 309本章小結 310習題13 311第 14章 DOM14.1 網頁中的DOM框架 31214.2 DOM中的節點 31314.2.1 元素節點 31314.2.2 文本節點 31414.2.3 屬性節點 31414.3 通過JavaScript訪問DOM 31414.3.1 訪問節點 31514.3.2 檢測節點類型 31714.3.3 父子兄關系 31714.3.4 節點屬性 32014.3.5 創建和操作節點 32114.4 DOM與CSS 32514.4.1 HTML、CSS、JavaScript三位一體 32514.4.2 className屬性 32614.5 事件 32614.5.1 事件與事件流 32714.5.2 事件監聽 32814.5.3 事件對象 330本章小結 331習題14 332
作者介紹
温谦：## 全栈工程师，前沿科技创始人，现从事企业大型软件系统的分析与开发工作，拥有20年的软件开发经验，主持并成功开发了多个复杂系统，项目实战经验丰富。## 常销书作者，毕业于华中科技大学计算机专业，主编网页设计与软件开发相关领域图书共12本，图书编写经验颇丰，其中《HTML+CSS网页设计与布局从入门到精通》《网页设计与布局项目化教程（HTML+CSS+DIV）》等图书常销10余年，被百余所高校选作教材。
